<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">
	
<style type="text/css">
	.info-box-content {
		padding: 5px 10px;
		margin-left: 90px;
	}
	.info-box-number {
		display: block;
		font-weight: bold;
		font-size: 18px;
		margin-top: 15px;
	}
	.info-box-text {
		text-transform: uppercase;
	}
	
	.info-box {
		display: block;
		min-height: 90px;
		background: #fff;
		width: 100%;
		box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.1) ; 
		border-radius: 2px;
		margin-bottom: 15px;
	}
	.bg-red{
		background-color: #dd4b39 !important;
	}
	.bg-aqua{
		background-color: #00c0ef !important ; 
	}
	.bg-yellow{
		background-color: #f39c12 !important ; 
	}
	span.info-box-icon {
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 2px;
		display: block;
		float: left;
		height: 90px;
		width: 90px;
		text-align: center;
		font-size: 45px;
		line-height: 90px;
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
        
            <div class="col-sm-12">
				<div class="bs-example" data-example-id="simple-jumbotron">
					<div class="jumbotron" style="border: 1px solid #ddd;">
						  <p>项目创建向导</p>
						  <h1 style="font-size: 35px;font-weight: 400;margin-bottom: 20px;">研发平台快速创建项目向导</h1>
						  <p><a class="btn btn-primary btn-lg" href="javascript:buildProjectStep();" role="button">创建项目</a></p>
					</div>
				</div>
			</div>
        	
            <div class="col-sm-7">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-desktop"></i> 统计</h4>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><i class="fab fa-google-plus-g"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">应用个数 </span>
                                        <span class="info-box-number" th:text="${appCount + ' 个'}">41,410 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fas fa-paper-plane"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">成员数 </span>
                                        <span class="info-box-number" th:text="${accountCount + ' 人'}">41,410 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow"><i class="fab fa-docker"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">功能数量 </span>
                                        <span class="info-box-number" th:text="${resourceCount + '个'}">7 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                       	
                       	<h4>项目开发手册</h4> 
                        <div class="list-group">
						  <a class="list-group-item" th:each="item:${devbooks}" th:href="${item.linkPath}" th:target="${item.linkTarget}">
						  	<i th:class="${item.linkLogo}"></i>	
						  	<span th:text="${item.linkName}">18-10 12:45 【部署服务】部署服务成功</span>
						  	<span th:if="${item.linkDesign eq '0'}" class="badge">完善中</span>
						  </a>
						</div>

                    </div>
                </div>
            </div>
            
            <div class="col-sm-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-leaf"></i> 运行监控</h4>
                    </div>
                    <div class="ibox-content">
                    	<div class="bs-example" data-example-id="progress-bar-with-label">
							<h4 class="m-t-none m-b">运行时间</h4>
							<div style="margin-bottom:20px;">
							  <h1><span th:text="${server.jvm.runTime}">Example page header </span> <small th:text="${'jdk:'+server.jvm.version}">Subtext for header</small></h1>
							</div>
							<h4 class="m-t-none m-b">CPU 用户使用率 </h4>
							<div class="progress">
							  <div 
							  	th:class="${server.cpu.used gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
							  	role="progressbar" 
							  	th:aria-valuenow="${server.cpu.used}" 
							  	th:text="${server.cpu.used + '%'}" 
							  	aria-valuemin="0" aria-valuemax="100" 
							  	th:style="${'width:' + server.cpu.used + '%'}">
								60%
							  </div>
							</div>
							<h4 class="m-t-none m-b">CPU 系统使用率 </h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" role="progressbar" 
										  th:class="${server.cpu.sys gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
										  th:aria-valuenow="${server.cpu.sys}" 
										  th:text="${server.cpu.used + '%'}" 
										  aria-valuemin="0" 
										  aria-valuemax="100" 
										  th:style="${'width:' + server.cpu.sys+ '%'}">
							    </div>
							</div>
							<h4 class="m-t-none m-b">系统内存使用率</h4>
							<div class="progress">
									<div class="progress-bar progress-bar-striped active" role="progressbar" 
										  th:class="${server.mem.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
										  th:aria-valuenow="${server.mem.usage}" 
										  th:text="${server.mem.usage}" 
										  aria-valuemin="0" 
										  aria-valuemax="100" 
										  th:style="${'width:' + server.mem.usage+ '%'}">
								  </div>
							</div>
							<h4 class="m-t-none m-b">JVM内存使用率</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" role="progressbar" 
										  th:class="${server.jvm.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
										  th:aria-valuenow="${server.jvm.usage}" 
										  th:text="${server.jvm.usage}" 
										  aria-valuemin="0" 
										  aria-valuemax="100" 
										  th:style="${'width:' + server.jvm.usage+ '%'}">
								</div>
							</div>
					    </div>
                    </div>
                </div>
            </div>
        	
        </div>
        
         
		  <div class="col-sm-12 select-table table-striped">
			<form id="ordinary-form" style="margin-bottom:15px">
				<div class="select-list">
					<ul>
						<li>
							应用名称：<input type="text" name="userName"/>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
			<table  id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
            
    </div>

	<footer th:replace="dashboard/footer :: footer"></footer>
    <script th:src="@{/asserts/ajax/libs/report/echarts/echarts-all.js}"></script>

	<script type="text/javascript">
	
		$(function() {
			var options = {
				url: ctx+"portal/ucenter/project/datatables" ,
				createUrl: ctx + 'portal/ucenter/project/add' ,
				updateUrl: ctx+"portal/ucenter/project/modify?id={id}" ,
				statusUrl: ctx+"portal/ucenter/project/changeStatus?id={id}" , 
				cleanUrl: ctx+"portal/ucenter/project/cleanAll",
				detailUrl: ctx+"portal/ucenter/project/detail?id={id}",
				removeUrl: ctx+"portal/ucenter/project/delete" ,
				exportUrl: ctx+"portal/ucenter/project/exportExcel",
				sortName: "operTime",
				uniqueId:"id" ,
				sortOrder: "desc",
				modalName: "操作日志",
				escape: true,
				showFooter: false ,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
				showPageGo: true,
				rememberSelected: true,
				columns: [
					{field: 'applicationName', title: '序号', align: 'center', formatter:function(value,row,index){ return index+1;} },
					{field: 'applicationIcons', title: '图标' , width:'60px',  align: 'center',  formatter: function(value, row, index) {
							var actions = [];
							actions.push('<img src="'+value+'" class="project-icons-list" aria-hidden="true"></i>');
							return actions.join('');
					  }
					},
					{field: 'applicationName', title: '应用名称'},
					{field: 'hasStatus',align: 'center',  title: '功能模块'},
					{field: 'hasStatus',align: 'center',  title: '角色数'},
					{field: 'hasStatus',align: 'center',  title: '用户数'},
					{field: 'hasStatus', align: 'center', title: '状态', align: 'center',  formatter:function(value,row,index){ return $.table.status(value , row);}},
					{field: 'id' , title: '操作',  align: 'center',  formatter: function(value, row, index) {
		                var actions = [];
		                actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="buildGit(\'' + row.id + '\')" ><i class="fab fa-github"></i>仓库</a> ');
		                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="buildJenkins(\'' + row.id + '\')"><i class="fab fa-docker"></i>构建</a> ');
		                return actions.join('');
					  }
					}
				 ]
			};
			$.table.init(options);
		});

		// 创建项目向导 
		function buildProjectStep() {
			var width = ($(window).width() - 200);
			var height = ($(window).height() - 100);

			var options = {
				title : '创建项目向导',
				width : width,
				height : height,
				shadeClose: false ,
				url : ctx + 'portal/ucenter/project/build',
				btn : false
			};
			$.modal.openOptions(options);
		}
	</script>	
	
</body>
</html>